$(function () {
    var tv;
    $.ajax({ //ajax  获取json的值
        url: "js/json4.json",
        type: "GET",
        async: false,
        success: function (json) {
            //执行成功毁掉函数
            tv = json;
        }
    })
    var tvshow = tv.list;
    var span = $("<span/>");
    $(span).appendTo($(".tv1"));
    $(span).css({
        width: "1250px",
        margin: "0 auto",
        display: "block",
        height: "210px",
        "z-index": "2",



    });
    var tvul = $("<ul/>");
    $(tvul).appendTo($(span))
    $(tvshow).each(function (index, tele) {
        var tvli = $("<li/>");
        $(tvli).appendTo($(tvul));
        $(tvli).css({
            width: "250px",
            height: "180px  ",
            float: "left",
            "text-align": "center"
        })
        var tvimg = $("<img>");
        tvimg.appendTo(tvli);
        tvimg.attr({
            "src": "img/" + tele.img
        })
        tvimg.css({
            background: "cover",
            width: "200px",
            height: "130px"
        })
        var a = $("<a/>")
        a.appendTo(tvli)
        a.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "text-align": "center",
            "color": "#686162"
        })
        a.html(tele.title)
        var p = $("<p/>")
        p.appendTo(tvli)
        p.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "text-align": "center",
            "color": "red"
        })
        p.html(tele.price)
    })
    // 手机json

    var pho;
    $.ajax({ //ajax  获取json的值
        url: "js/json1.json",
        type: "GET",
        async: false,
        success: function (json1) {
            //执行成功毁掉函数
            pho = json1;
        }
    })
    var phone = pho.phone;
    var span1 = $("<span/>");
    $(span1).appendTo($(".phone1"));
    $(span1).css({
        width: "1000px",
        margin: "0 auto",
        display: "block",
        height: "210px",

    });
    var phoul = $("<ul/>");
    $(phoul).appendTo($(span1))
    $(phone).each(function (index, phone) {
        var pholi = $("<li/>");
        $(pholi).appendTo($(phoul));
        $(pholi).css({
            width: "250px",
            height: "180px  ",
            float: "left",
            "text-align": "center"
        })
        var phoimg = $("<img>");
        phoimg.appendTo(pholi);
        phoimg.attr({
            "src": "img/" + phone.img
        })
        phoimg.css({
            background: "cover",
            width: "200px",
            height: "130px",
        })
        var phoa = $("<a/>")
        phoa.appendTo(pholi)
        phoa.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "#686162"
        })
        phoa.html(phone.title)
        var phop = $("<p/>")
        phop.appendTo(pholi)
        phop.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "red"
        })
        phop.html(phone.price)
    })
    // 空调
    var kongtiao;
    $.ajax({ //ajax  获取json的值
        url: "js/json2.json",
        type: "GET",
        async: false,
        success: function (json2) {
            //执行成功毁掉函数
            kongtiao = json2;
        }
    })
    var kongt = kongtiao.kong;
    var span2 = $("<span/>");
    $(span2).appendTo($(".kongtiao1"));
    $(span2).css({
        width: "1250px",
        margin: "0 auto",
        display: "block",
        height: "210px",

    });
    var kul = $("<ul/>");
    $(kul).appendTo($(span2))
    $(kongt).each(function (index, kt) {
        var kli = $("<li/>");
        $(kli).appendTo($(kul));
        $(kli).css({
            width: "250px",
            height: "180px  ",
            float: "left",
            "text-align": "center",
        })
        var kimg = $("<img>");
        kimg.appendTo(kli);
        kimg.attr({
            "src": "img/" + kt.img
        })
        kimg.css({
            background: "cover",
            width: "200px",
            height: "130px"
        })
        var ka = $("<a/>")
        ka.appendTo(kli)
        ka.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "#686162"
        })
        ka.html(kt.title)
        var kp = $("<p/>")
        kp.appendTo(kli)
        kp.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "red"
        })
        kp.html(kt.price)
    })
    // 冰箱
    var bing;
    $.ajax({ //ajax  获取json的值
        url: "js/json3.json",
        type: "GET",
        async: false,
        success: function (json3) {
            //执行成功毁掉函数
            bing = json3;
        }
    })
    var bingxiang = bing.bx;
    var span3 = $("<span/>");
    $(span3).appendTo($(".bingx1"));
    $(span3).css({
        width: "1250px",
        margin: "0 auto",
        display: "block",
        height: "210px",

    });
    var bxul = $("<ul/>");
    $(bxul).appendTo($(span3))
    $(bingxiang).each(function (index, bx) {
        var bxli = $("<li/>");
        $(bxli).appendTo($(bxul));
        $(bxli).css({
            width: "250px",
            height: "180px  ",
            float: "left",
            "text-align": "center",
        })
        var bximg = $("<img>");
        bximg.appendTo(bxli);
        bximg.attr({
            "src": "img/" + bx.img
        })
        bximg.css({
            background: "cover",
            width: "200px",
            height: "130px"
        })
        var bxa = $("<a/>")
        bxa.appendTo(bxli)
        bxa.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "#686162",
            "text-align": "center"
        })
        bxa.html(bx.title)
        var bxp = $("<p/>")
        bxp.appendTo(bxli)
        bxp.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "red"
        })
        bxp.html(bx.price)
    })
    //洗衣机
    var xiyi;
    $.ajax({ //ajax  获取json的值
        url: "js/json5.json",
        type: "GET",
        async: false,
        success: function (json4) {
            //执行成功毁掉函数
            xiyij = json4;
        }
    })
    var xiyiji = xiyij.xy;
    var span4 = $("<span/>");
    $(span4).appendTo($(".xiyiji1"));
    $(span4).css({
        width: "1250px",
        margin: "0 auto",
        display: "block",
        height: "210px",

    });
    var xykul = $("<ul/>");
    $(xykul).appendTo($(span4))
    $(xiyiji).each(function (index, xy) {
        var xykli = $("<li/>");
        $(xykli).appendTo($(xykul));
        $(xykli).css({
            width: "250px",
            height: "180px  ",
            float: "left",
            "text-align": "center",
        })
        var xykimg = $("<img>");
        xykimg.appendTo(xykli);
        xykimg.attr({
            "src": "img/" + xy.img
        })
        xykimg.css({
            background: "cover",
            width: "200px",
            height: "130px"
        })
        var xyka = $("<a/>")
        xyka.appendTo(xykli)
        xyka.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "#686162"
        })
        xyka.html(xy.title)
        var xykp = $("<p/>")
        xykp.appendTo(xykli)
        xykp.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "red"
        })
        xykp.html(xy.price)
    })
    // 健康
    var jiankang;
    $.ajax({ //ajax  获取json的值
        url: "js/json6.json",
        type: "GET",
        async: false,
        success: function (json5) {
            //执行成功毁掉函数
            jkang = json5;
        }
    })
    var jiank = jkang.jk;
    var span5 = $("<span/>");
    $(span5).appendTo($(".nice1"));
    $(span5).css({
        width: "1250px",
        margin: "0 auto",
        display: "block",
        height: "210px",

    });
    var jkul = $("<ul/>");
    $(jkul).appendTo($(span5))
    $(jiank).each(function (index, jik) {
        var jkli = $("<li/>");
        $(jkli).appendTo($(jkul));
        $(jkli).css({
            width: "250px",
            height: "180px  ",
            float: "left",
            "text-align": "center",
        })
        var jkimg = $("<img>");
        jkimg.appendTo(jkli);
        jkimg.attr({
            "src": "img/" + jik.img
        })
        jkimg.css({
            background: "cover",
            width: "200px",
            height: "130px"
        })
        var jka = $("<a/>")
        jka.appendTo(jkli)
        jka.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "#686162"
        })
        jka.html(jik.title)
        var jkp = $("<p/>")
        jkp.appendTo(jkli)
        jkp.css({
            display: "block",
            width: "250px",
            "font-size": "12px",
            "color": "red"
        })
        jkp.html(jik.price)
    })
       // list,json



$("#olist").on("click",".obtn",function(){
    if(!getCookie("goods")){
        setCookie("goods",'[{"id":"'+this.id+'","num":"1"}]');
        //console.log("第一次添加数据");  结构;
    }else{
        //console.log("第二次添加数据");
        //1.获取原cookie数据;
        var sCookie =getCookie("goods");
        console.log(sCookie)
        //2.把字符串cookie变成 数组cookie 方便操作;
         var aCookie = JSON.parse(sCookie);
            // 2.1 判定当前的购物车数组之中是否有数据;
                //如果有数据，对num属性进行自增;
                //如果没有数据, 建立 {} 结构 push进数组之中;
        var hasGoods = false;
        for(var i = 0 ; i < aCookie.length ; i++){
            //console.log(aCookie[i].id);
            if(this.id == aCookie[i].id){
                //
                aCookie[i].num++;
                hasGoods = true;
                break;
            }
        }

        if(!hasGoods){
            aCookie.push({
                id:this.id,
                num:1
            });
        }
        //3.把数组转换成字符串;
        var sRes = JSON.stringify(aCookie);
        setCookie("goods",sRes);
    }
    console.log(getCookie("goods"))
   
    var sCookie = getCookie("goods");
    
            if(sCookie == ""){
                return 0;
            }
            var aCookie = JSON.parse(sCookie);
            var res = 0;
            for(var i = 0 ; i < aCookie.length ; i++){
                res += parseInt(aCookie[i].num);
            }	
    
            $(".num").html(res);
    
})

    


    $("#ul").on("mouseover","li",function(){
        $(this).css({
            background:"red"
            
        })
       
    }).on("mouseout","li",function(){
        $(this).css(
            {
                background:""
            }
        )
    })

})
 function Pagination(){
    this.btnl=document.getElementById("btnl")
    this.btnr=document.getElementById("btnr")
    this.list=document.getElementById("olist")
    this.ul=document.getElementById("ul")
    console.log()
    this.PageNum=0;
    this.load()

}
Pagination.prototype.init=function(){
  
    this.allPag=Math.ceil(this.json.length/12)
    var all=this.allPag

    var  a="";
    for(var j=0;j<this.allPag;j++){
    
        
        a+="<li>"+(j+1) +"</li>"
    }
    this.ul.innerHTML=a
  
    var that=this;
    this.btnl.onclick=function(){
    
        that.changePagNum("left")
      

    }
    this.btnr.onclick=function(){
        that.changePagNum("right") 
     
    }
  
    this.rendringPag()
}
Pagination.prototype.changePagNum=function(direction){
    if(direction=="left"){
        if(this.PageNum==0){
            this.PageNum=this.allPag-1;
            
        }else{
            this.PageNum--;
        }
    }else{
        if(this.PageNum==this.allPag-1){
            this.PageNum=0
        }else{
            this.PageNum++;
        }
    }
    console.log(this.PageNum)
    this.rendringPag()
}

Pagination.prototype.rendringPag=function(){
  
    var html="";
    for(var i=12*this.PageNum;i<12*(this.PageNum+1);i++){
        if(i<this.json.length){
            
        html += `
        <li >
            <div class="oimg">
            <a href='ht/details.html?id="${this.json[i].id}"'>
               <img src="${this.json[i].img}" alt="">
               </a>
            </div>
            <div class="ols"><p>${this.json[i].ls}</p>
            </div>
            <div class="otime"><p>${this.json[i].time}</p></div>
            <div class="otitle"><p>${this.json[i].title}</p></div>
            <div class="oprice"><p>${this.json[i].price}</p></div>
            <div >
           
             <div class="obtn" id="${this.json[i].id}"><a>加入购物车</a> 
            </div>
            </div>
        </li>`
    }
}

this.list.innerHTML = html;
}


Pagination.prototype.load=function(){
    var that=this
      ajaxGet("js/list.json",function(res){
          that.json=eval(res)
          that.init()
      })
    }
   
new Pagination();

// $(function(){
   
//      addshop();
//     getnum();
    
// })



//     function getnum(){
//         var sCookie=$.cookie("goods");
//         if(sCookie==""){
//             return 0
//         }
//         var aCookie=JSON.pares(sCookie);
//         var res=0;
//         for(var i=o;i<aCookie.length;i++){
//             res+=parseInt(aCookie[i].num)
//         }
//         $(".num").html(num)
//     }
// function addshop(){
       
// $("#olist").on("click",".obtn",function(){
//     console.log($(this).attr("id"));
//     if(!$.cookie("goods")){
//         $.cookie("goods",'[{"id":"'+this.id+'","num":"1"}]');
//     }else{
//         var aCookie=JSON.parse(sCookie)
//         var hasGood=false;
//         for(var i=0;i<aCookie.length;i++){
            
//             if(this.id==aCookie[i].id){
//                 aCookie[i].num++;
//                 hasGood=true;
//                 break
//             }
//         }
    
//     if(!hasGood){
//         aCookie.push({
//             id:this.id,
//             num:1
//         });
//     }
//     var sres=JSON.stringify(aCookie);
//     $.cookie("goods",sres)
//     console.log($(this).attr("id")) 
// } 
// console.log($.cookie("goods"));
// getnum()
// })

//     }
